<template>
	<view>
		<image class="justify-center imgtop" src="../../static/sort/top.png"></image>
		<view class="text-bold text-xl text-green text-center padding-top-sm bg-white">日常垃圾如何分类？</view>
		<view class="box">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="key" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入关键字" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round" @click="onSearch()">搜索</button>
				</view>
			</view>
		</view>
		<view class="cu-card article no-card">
			<view class="cu-item shadow" >
				
				<view class="content">
					<image src="../../static/sort/1.png"
					 mode="aspectFit"></image>
					
					<view class="desc">
						<view class="text-bold text-lg">可回收物</view>
						<view class="text-content">废纸张、废塑料、废玻璃制品、金废属、废织物等适宜回收、可循环利用可回收物的生活废弃物；</view>
					</view>	
				</view>
				
			</view>
			
			<view class="cu-item shadow" >
				<view class="content">
					<image src="../../static/sort/2.png"
					 mode="aspectFit"></image>
					 
					<view class="desc">
						<view class="text-bold text-lg">有害垃圾</view>
						
						<view class="text-content">废电池、废灯管、废药品、废油漆及其容器等对人体健康或者自然环境造有害垃圾成直接或者潜在危害的生活废弃物；</view>
					</view>
				</view>
				
			</view>
			<view class="cu-item shadow" >
				<view class="content">
					<image src="../../static/sort/3.png"
					 mode="aspectFit"></image>
					<view class="desc">
						<view class="text-bold text-lg">易腐垃圾</view>
						
						<view class="text-content">食材废料、剩菜剩饭、过期食品、瓜皮果核、花卉绿植、中药药渣等生物易腐垃圾质生活废弃物；</view>
					</view>
				</view>
				
			</view>
			
			<view class="cu-item shadow" >
				<view class="content">
					<image src="../../static/sort/4.png"
					 mode="aspectFit"></image>
					<view class="desc">
						<view class="text-bold text-lg">其他垃圾</view>
						
						<view class="text-content">除可回收物、有害垃圾、易腐垃圾除外的生活废弃物；</view>
					</view>
				</view>
				
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key:''
			};
		},
		onLoad() {
			
		},
		// 监听页面显示
		onShow() {
				
			
		},
		computed: {
			
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			onSearch(){
				//console.info('search?id='+this.key)
				uni.navigateTo({
					url: 'search?id='+this.key,
					animationType: 'slide-in-right',
					//animationDuration: '200'
				})
			}
		}
	}
</script>

<style>
	.imgtop{
		width: 100%;
		height: 100px;
	}
</style>
